@import "vendor/elements.less";

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
    font-family: 'Open Sans', sans-serif;
    background:none;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

ul {
    list-style:none;
    padding:0;
    margin:0;
}


.container-fluid {
	max-width:1200px;
	margin:0 auto;
        &.thin {
            width:470px;
        }
}



.sidebar-menu {
    position:fixed;
    left:-51px;
    top:0;
    bottom:0;
    width:50px;
    background-color:#000000;
    z-index:9999;
    
    /* side menu open/close */
    .sidebar-open-close {
        position:fixed;
        top:0;
        left:0;
        overflow:hidden;
        line-height:35px;
        display:block;
        background-color:#000000;
        background-position:50% 50%;
        background-repeat:no-repeat;
        background-image:url(../images/icons/icon_submenu.gif);
        padding:0 10px 0 28px;
        border:0;
        color:#ffffff;
        text-decoration:none;
        text-align:center;
        font-size:13px;
        &.menu-open {
            background-image:url(../images/icons/icon_submenu_close.gif);
        }
    }
    
    /* first level anchor */
    > a {
        width:50px;
        height:50px;
        overflow:hidden;
        display:block;
        outline:none;
        text-indent:-9999px;
    }
    /* first level list */
    > ul {
        padding:0;
        margin:50px 0 0 0;
        list-style:none;
        border-top:1px solid #3e3e3e;
        > li {
            margin-bottom:1px;
            position:relative;
            &:hover > a {
                background-color:#000000;
            }
            > a {
                width:50px;
                display:block;
                height:51px;
                text-indent:-9999px;
                overflow:hidden;
                outline:none;
                background:#1e1e1e;
                border-bottom:1px solid #3e3e3e;
                background-position:50% 50%;
                background-repeat:no-repeat;
                &.experiments {background-image:url(../images/icons/icon_32_white_lab.png);}
                &.homepage {background-image:url(../images/icons/icon_32_white_home.png);}
            }
            /* second level anchor */
            > ul {
                position:absolute;
                left:100%;
                top:0;
                width:200px;
                display:none;
                //border-left:1px solid #3e3e3e;
                > li {
                    width:100%;
                    //border-bottom:1px solid #3e3e3e;
                    a {
                        display:block;
                        background-color:#1e1e1e;
                        width:100%;
                        padding:8px;
                        margin-bottom:1px;
                        font-size:13px;
                        text-decoration:none;
                        color:#ffffff;
                        &:hover {
                            background-color:#000000;
                        }
                    }
                }
            }
        }
    }
}

.generic-page-wrapper {
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
    left:0;
    right:0;
    text-align:center;
    position:fixed!important;
    top:0;
    bottom:0;
    width:100%;
    h1 {
        position:absolute;
        width:100%;
        left:0;
        top:25%;
        font-weight:300;
        font-size:60px;
        line-height:110%;
        color:#ffffff;
        padding-top:145px;
        background-position:50% top;
        background-repeat:no-repeat;
        text-shadow: 0 0 95px #000000;
        span {
            font-size:40px;
            display:block;
        }
    }
    &.homepage {
        background-image:url(../images/bg/lab_old.jpg);
        h1 {
            background-image:url(../images/icons/icon_128_white_lab.png);
        }
    }
    &.full-video {
        h1 {
            background-image:url(../images/icons/icon_128_white_tv.png);
        }
    }
    
}

.video-overlay {
    z-index:98;
    position:absolute;
    left:0;
    width:100%;
    bottom:0;
    top:0;
    right:0;
    background:url(../images/bg-video-overlay.png) top left;
}

.full-screen-video-controls {
    position:fixed;
    bottom:15px;
    right:15px;
    a {
        display:block;
        padding:5px 10px;
        background-color:rgb(0,0,0);
        background-color:rgba(0,0,0,0.8);
        color:#ffffff;
        font-size:13px;
        font-weight:600;
        text-decoration:none;
        float:left;
        margin-left:1px;
        
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        &:hover {
            text-decoration:none;
            cursor:pointer;
            background-color:rgb(0,0,0);
            background-color:rgba(0,0,0,0.8);
        }
    }
}

/* css sliders */

.slider-container {
    width:50%;
    margin-bottom:20px;
    float:left;
}

.ui-slider {
    background:#f5f5f5;
    width:85%;
    height:12px;
    float:left;
    cursor:pointer;
}

.ui-slider-handle {
    width:22px;
    height:22px;
    outline:0!important;
    top:-4px!important;
    background:#484848;
    display:block;
    cursor:pointer!important;
    .rounded(50%);
    &:active, &:visited {
        outline:!important;
    }
    &:hover {
        background-color:#0d0d0d;
    }
}

/* /css sliders */





/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
